<!DOCTYPE html>
<html>
<head>
<style>
div.mascot_lap_dissolve
{
  width: 250px;
  height: 213px;
  animation-name: lap_dissolve;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

@keyframes lap_dissolve
{
  0%   {background-image: url("../images/mascot/mascot_250x213_red.png");}
  12.5%   {background-image: url("../images/mascot/mascot_250x213_orange.png");}
  25%   {background-image: url("../images/mascot/mascot_250x213_yellow.png");}
  37.5%   {background-image: url("../images/mascot/mascot_250x213_green.png");}
  50%   {background-image: url("../images/mascot/mascot_250x213_blue.png");}
  62.5%   {background-image: url("../images/mascot/mascot_250x213_indigo.png");}
  75%  {background-image: url("../images/mascot/mascot_250x213_violet.png");}
  87.5%  {background-image: url("../images/mascot/mascot_250x213_gray.png");}
  100% {background-image: url("../images/mascot/mascot_250x213_brown.png");}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div class="mascot_lap_dissolve"></div>

</body>
</html>
